<template>
    <div class="form-design-third clear" @click.self="active=null" ref="third">
        <!-- 侧边栏 -->
        <aside v-show="active" class="el-aside-right fr">
            <!-- step1 -->
            <div v-show="active=='first'" class="el-aside-right-first">
                <p>发起人</p>
                <p class="initiatorRange">谁可以发起这个审批</p>
                <el-select
                    v-model="whom"
                    key="first"
                    @change="checkAllRange"
                    placeholder="请选择文章标签">
                    <el-option
                        v-for="item in initiators"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select> 

                <div class="range"v-if="whom==2">
                    <p>{{choicePeople.map(item=>item.name).toString()}}</p>
                    <span @click="visualRangeView=true" class="choose">选择</span>
                    <span v-show="choicePeople.length==0" class="error">发起人不能为空</span>
                </div>   

                <!-- 侧边栏底部操作按钮 -->
                <div class="btn-group">
                    <el-button @click="cancelFirst">取消</el-button>
                    <el-button @click="sureFirst" type="primary">确定</el-button>
                </div>           
            </div>


            <!-- step2 -->
            <div v-show="active=='second'" class="el-aside-right-second">
                <p>审批人<img style="margin-left:14px;transform:translateY(3px)" src="../../../../static/image/examine/edit.png" alt="编辑图标" /></p>
                <el-radio-group class="first-radio" v-model="initiatorRadio">
                    <el-radio :label="1">发起人自选</el-radio>
                    <el-radio :label="2">指定成员</el-radio>
                    <el-radio :label="3">发起人自己</el-radio>
                    <el-radio :label="4">班主任</el-radio>
                </el-radio-group>
                
                <!-- 发起人自选 -->
                <div v-show="initiatorRadio==1" class="optional">
                    <el-select v-model="whom2" key="second" placeholder="请选择">
                        <el-option
                            v-for="item in initiators2"
                            :key="item.label"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>

                    <p v-show="whom2=='2'" class="noApprover">多人审批时采用的审批方式</p>
                    <el-radio-group v-show="whom2=='2'" v-model="approveWap">
                        <el-radio :label="1">依次审批</el-radio>
                        <el-radio :label="2">会签<span>（须所有审批人同意）</span></el-radio>
                        <el-radio :label="3">或签<span>（一名审批人拒绝或同意即可）</span>
                            <el-tooltip
                                class="item"
                                placement="bottom"
                                effect="light">
                                <div slot="content" style="width:260px;line-height:18px;">或签是指比如您有设置ABC三人审批，但是A看见了这个审批单进行审批，那么这个审批单的节点就以A的审批结束，有一点先到先得的意思</div>
                                <img 
                                    style="transform:translateY(3px)" 
                                    src="../../../../static/image/examine/exclamation.png" 
                                    alt="感叹号图标" />
                            </el-tooltip>
                        </el-radio>
                    </el-radio-group>

                    <p class="noApprover">审批人为空时</p>
                    <el-radio-group v-model="noApproverRadio">
                        <el-radio :label="1">自动通过</el-radio>
                        <el-radio :label="2">自动转交管理员</el-radio>
                        <el-select v-model="admin" :disabled="noApproverRadio!=2" placeholder="选择管理员（必选）">
                            <el-option
                                v-for="(item,key) in dministrator"
                                :key="key"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-radio-group>
                </div>

                <!-- 指定成员 -->
                <div class="appointed" v-show="initiatorRadio==2" >
                    <el-button @click="showAddMember=true" type="primary">添加成员</el-button>
                    <span>不能超过{{max5}}个人</span>
                    <div class="chosen clear">
                        <span v-for="(item,key) in zhidingMember" :key="key" class="fl">
                            {{item.name}} 
                            <i @click="cancelCheck(undefined,key)" class="el-icon-close pointer"></i>
                        </span>
                        <button @click="clearCheck" class="pointer">清空</button>
                    </div>
                    <p class="noApprover">多人审批时采用的审批方式</p>
                    <el-radio-group v-model="approveWap">
                        <el-radio :label="1">依次审批</el-radio>
                        <el-radio :label="2">会签<span>（须所有审批人同意）</span></el-radio>
                        <el-radio :label="3">或签<span>（一名审批人拒绝或同意即可）</span>
                            <el-tooltip
                                class="item"
                                placement="bottom"
                                effect="light">
                                <div slot="content" style="width:260px;line-height:18px;">或签是指比如您有设置ABC三人审批，但是A看见了这个审批单进行审批，那么这个审批单的节点就以A的审批结束，有一点先到先得的意思</div>
                                <img 
                                    style="transform:translateY(3px)" 
                                    src="../../../../static/image/examine/exclamation.png" 
                                    alt="感叹号图标" />
                            </el-tooltip>
                        </el-radio>
                    </el-radio-group>
                </div>

                <!-- 发起人自己 -->
                <p v-show="initiatorRadio==3" class="myself">发起人自己作为审批人</p>

                <!-- 班主任 -->
                <div v-show="initiatorRadio==4" class="classMaster">
                    <p class="applyRange" >适用于：如学生请假，将会自动选取绑定的班级的班主任</p>
                    <p class="noApprover">审批人为空时</p>
                    <el-radio-group v-model="noApproverRadio">
                        <el-radio :label="1">自动通过</el-radio>
                        <el-radio :label="2">自动转交管理员</el-radio>
                        <el-select v-model="admin" :disabled="noApproverRadio!=2" placeholder="选择管理员（必选）">
                            <el-option
                                v-for="(item,key) in dministrator"
                                :key="key"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-radio-group>
                </div>

                <!-- 侧边栏底部操作按钮 -->
                <div class="btn-group">
                    <el-button @click="cancelSecond">取消</el-button>
                    <el-button @click="sureSecond" type="primary">确定</el-button>
                </div>
            </div>


            <!-- step3 -->
            <div v-show="active=='third'" class="el-aside-right-third">
                <p>抄送人<img style="margin-left:14px;transform:translateY(3px)" src="../../../../static/image/examine/edit.png" alt="编辑图标" /></p>
                <el-button type="primary" @click="showAddCopyMember=true" icon="el-icon-plus">添加成员</el-button>
                <div class="chosen clear">
                    <span v-for="(item,key) in copyMember" :key="key" class="fl">
                        {{item.name}} 
                        <i @click="cancelCopyMember(undefined,key)" class="el-icon-close pointer"></i>
                    </span>
                    <button @click="clearCopyMember" class="pointer">清空</button>
                </div>
                <el-checkbox v-model="ifMax10">允许发起人自选抄送人（最多抄送{{max10}}个）</el-checkbox>

                <!-- 侧边栏底部操作按钮 -->
                <div class="btn-group">
                    <el-button @click="cancelThird">取消</el-button>
                    <el-button @click="sureThird" type="primary">确定</el-button>
                </div>
            </div> 
        </aside>
        <!-- <aside v-if="active" class="el-aside-left fl"></aside> -->

        <!-- 中间流程区域 -->
        <div class="form-design-third-main">
            <ul>
                <li @click="turnStep1" :class="{pointer:true,active:active==='first'}">
                    <p style="background:#efefef;">发起人</p>
                    <div class="clear">
                        <span>发起人</span>
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </li>
                <li></li>
                <li 
                    @click="turnStep2"
                    :class="{pointer:true,active:active==='second'}">
                    <p style="background:#e9f7fb">
                        <span v-if="!showChangeName" @click="approverEdit">{{finalSecondName}}</span>
                        <input v-if="showChangeName" ref="changeName" @keydown.enter="setApprove" @blur="setApprove" maxlength="10" type="text" v-model="finalSecondName"/>
                    </p>
                    <div class="clear">
                        <span>{{chooseApprove}}</span>
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </li>
                <li></li>
                <li @click="turnStep3" :class="{pointer:true,active:active==='third'}">
                    <p style="background:#e4f5e6;">抄送人</p>
                    <div class="clear">
                        <span>发起人自选</span>
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </li>
            </ul>
        </div>

        <!-- 选择谁可以发起审 -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'可见范围'"
            :visible.sync="visualRangeView"
            width="400px">
            <div class="checkRange clear">
                <el-checkbox :indeterminate="isIndeterminate" v-model="rangeCheckAll" @change="checkAllRange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="preChoicePeople" @change="handleChoicePeopleChange">
                    <el-checkbox v-for="(item,key) in people" :label="item" :key="key">{{item.name}}</el-checkbox>
                </el-checkbox-group>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelChoosePeople">取消</el-button>
                <el-button @click="affirmChoicePeople" type="primary">确定</el-button>
            </div>
        </el-dialog>

        <!-- 审批人选择添加成员 -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'选择'"
            :visible.sync="showAddMember"
            width="800px">
            <div class="addMember clear">
                <div class="fl">
                    <el-select v-model="roleType" @change="updateUserList" placeholder="请选择">
                        <el-option
                            v-for="(item,key) in roleList"
                            :key="key"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>   
                </div>

                <div class="fl">
                    <el-input
                        @keyup.enter.native="searchUser(keyword,$event)"
                        placeholder="用户账号、姓名"
                        v-model="keyword">
                    </el-input>
                    <el-button @click="searchUser(keyword,$event)" type="primary">搜索</el-button>
                </div>

                <div class="fl">
                    <ul>
                        <li v-for="(item,key) in userList" :key="key">
                            <span class="fl">{{key+1+'.'+item.name}}</span>
                            <span class="fl">{{item.role_name}}</span>
                            <span class="fl pointer" @click="addMember(key)">添加</span>
                        </li>
                    </ul>
                </div>

                <div class="fl">
                    <ul>
                        <li class="clear">
                            <span class="fl">账号</span>
                            <span class="fl">用户名</span>
                            <span class="fl">角色</span>
                        </li>
                        <li class="clear" v-for="(item,key) in preZhidingMember" :key="key">
                            <span class="fl">
                                <i @click="cancelCheck(key)" class="el-icon-close pointer"></i>
                                {{item.number}}
                            </span>
                            <span class="fl">{{item.name}}</span>
                            <span class="fl">{{item.role_name}}</span>
                        </li>
                        
                    </ul>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelFinalZhidingMember">取消</el-button>
                <el-button @click="affirmFinalZhidingMember" type="primary">确定</el-button>
            </div>
        </el-dialog>

        <!-- 抄送人选择添加成员 -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'选择'"
            class="copy"
            :visible.sync="showAddCopyMember"
            width="800px">
            <div class="addMember clear">
                <div class="fl">
                     <el-select v-model="roleType" @change="updateUserList" placeholder="请选择">
                        <el-option
                            v-for="(item,key) in roleList"
                            :key="key"
                            :label="item.name"
                            :value="item.id">
                        </el-option> 
                    </el-select>   
                </div>

                <div class="fl">
                    <el-input
                        @keyup.enter.native="searchUser(keyword,$event)"
                        placeholder="用户账号、姓名"
                        v-model="keyword">
                    </el-input>
                    <el-button @click="searchUser(keyword,$event)" type="primary">搜索</el-button>
                </div>

                <div class="fl">
                    <ul>
                        <li v-for="(item,key) in userList" :key="key">
                            <span class="fl">{{key+1+'.'+item.name}}</span>
                            <span class="fl">{{item.role_name}}</span>
                            <span class="fl pointer" @click="addCopyMember(key)">添加</span>
                        </li>
                    </ul>
                </div>

                <div class="fl">
                    <ul>
                        <li class="clear">
                            <span class="fl">账号</span>
                            <span class="fl">用户名</span>
                            <span class="fl">角色</span>
                        </li>
                        <li class="clear" v-for="(item,key) in preCopyMember" :key="key">
                            <span class="fl">
                                <i @click="cancelCopyMember(key)" class="el-icon-close pointer"></i>
                                {{item.number}}
                            </span>
                            <span class="fl">{{item.name}}</span>
                            <span class="fl">{{item.role_name}}</span>
                        </li>
                        
                    </ul>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelFinalCopyMember">取消</el-button>
                <el-button @click="affirmFinalCopyMember" type="primary">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
    export default {
        name:'third',
        props:['examineModel'],
        data(){
            return {
                itc:'thirdITC',
                active:null,   // 选中的流程分别为first,second,third，默认为null 未选中
                showChangeName:false,   // 控制第二个title的修改状态
                initSecondName:'审批人',   // 第二流程的title初始值
                finalSecondName:'审批人',   // 第二流程的title初始值修改后的值
                userList:[],   // 存放用户列表
                roleType:0,   // 角色类型，0为全部
                roleList:[{id:0,name:'全部'}],   // 存放角色列表
                keyword:'',   // 搜索关键字

                // ------------------step1的变量------------------
                    initiators:[   // 可提供选择的发起人
                        {
                            value: 1,
                            label: '全部'
                        }, {
                            value: 2,
                            label: '选择角色'
                        }
                    ],
                    whom:1,   // 谁可以审批
                    finalWhom:1,   // 最终谁可以审批
                    visualRangeView:false,   // 控制选择谁可以发起审批弹窗的显隐
                    rangeCheckAll: false,    // 值为true时代表所有范围全选
                    finalChoicePeople: [],    // 最终已选可以发起审批的人的数组
                    choicePeople: [],    // 已选可以发起审批的人的数组
                    preChoicePeople: [],    // 可以发起审批的人的数组（预选）
                    people: [],   // 谁可以发起审批的选项数组
                    isIndeterminate: false,   // 负责全选的样式控制
                // ------------------step1的变量------------------


                // ------------------step2的变量------------------
                    max5:5,   // 不能超过5个人
                    dministrator:[],   // 存放管理员信息的数组
                    admin:'',   // 选中的管理员
                    finalAdmin:'',   // 最终选中的管理员
                    initiatorRadio:1,   // 发起人类型
                    finalInitiatorRadio:1,   // 最终确定时发起人类型
                    initiators2:[   // 可提供选择的发起人
                        {
                            value: 1,
                            label: '自选一个人'
                        }, {
                            value: 2,
                            label: '自选多个人'
                        }
                    ],
                    whom2:1,   // 已选中的发起人
                    finalWhom2:1,   // 最终已选中的发起人
                    approveWap:1,   // 多人审批时采用的审批方式 （1:依次审批；2:会签；3：或签）
                    finalApproveWap:1,   // 最终的审批方式
                    noApproverRadio:1,   // 审批人为空时单选框选中的项
                    finalNoApproverRadio:1,   // 最终审批人为空时单选框选中的项
                    value:'',
                    showAddMember:false,   // 控制添加成员弹窗的显隐
                    preZhidingMember:[],   // 第二步骤中指定成员框里的添加的成员列表(预选)
                    zhidingMember:[],   // 第二步骤中指定成员框里的添加的成员列表
                    finalZhidingMember:[],   // 第二步骤中指定成员框里的添加的成员列表(最终确认的)
                // ------------------step2的变量------------------


                // ------------------step3的变量------------------
                    showAddCopyMember:false,   // 控制添加成员弹窗的显隐
                    preCopyMember:[],   // 已选中的抄送人 (预选)
                    copyMember:[],   // 已选中的抄送人
                    finalCopyMember:[],   // 最终已选中的抄送人 
                    max10:10,   // 最多10个人
                    ifMax10:false,   // 是否最多10个人
                    finalIfMax10:false
                // ------------------step3的变量------------------
            }
        },
        watch:{
            examineModel:{
                handler(newVal,oldVal){
                    if(newVal && this.$route.query.model === 'no'){
                        // 发起人信息重置
                        if(this.people.length != 0){
                            
                            this.finalChoicePeople = [];
                            this.choicePeople = [];
                            this.preChoicePeople = [];

                            this.people.forEach(item=>{
                                newVal.role.forEach(item2=>{
                                    if(item.id == item2.id){
                                        this.finalChoicePeople.push(item);
                                        this.choicePeople.push(item);
                                        this.preChoicePeople.push(item);
                                    }
                                });
                            });

                            this.whom = this.finalWhom = 2;
                            this.rangeCheckAll = false;
                            this.isIndeterminate = true;

                            if(this.people.length == this.finalChoicePeople.length){
                                this.whom = this.finalWhom = 1;
                                this.rangeCheckAll = true;
                                this.isIndeterminate = false;
                            }

                        }

                        // 审批人信息重置
                        let process_design = newVal.process_design;   // 审批流程
                        this.initiatorRadio = this.finalInitiatorRadio = newVal.type;   // 审批人类型
                        this.initSecondName = this.finalSecondName = process_design.approver_name || '审批人' ;   //自定义的审批人名字

                        // 发起人类型为发起人自选
                        if(newVal.type == 1){   
                            this.whom2 = this.finalWhom2 = +process_design.select_type;   // select_type : 1：自选一个人 ； 2：自选多个人
                            this.noApproverRadio = this.finalNoApproverRadio = process_design.empty_approve;   // 1、自动通过 ； 2：自动转交管理员

                            if(process_design.select_type == 2){
                                this.approveWap = this.finalApproveWap = +process_design.approval_model;   // 1、依次审批 ； 2：会签（须所有审批人同意）;3:或签（一名审批人同意或拒绝即可）
                            }

                            this.noApproverRadio = this.finalNoApproverRadio = +process_design.empty_approve;

                            if(this.noApproverRadio == 2){
                                this.admin = this.finalAdmin = + process_design.approver;
                            }

                        }
                        // 发起人类型为指定成员
                        else if(newVal.type == 2){   
                            this.approveWap = this.finalApproveWap = +process_design.approval_model;   // 1、依次审批 ； 2：会签（须所有审批人同意）;3:或签（一名审批人同意或拒绝即可）
                            
                            // this.zhidingMember,this.preZhidingMember,this.finalZhidingMember = 在getUserList请求中获取用户信息           

                        }
                        // 发起人类型为发起人自己
                        else if(newVal.type == 3){   
                            // 无操作
                        }
                        // 发起人类型为班主任
                        else if(newVal.type == 4){   
                            this.noApproverRadio = this.finalNoApproverRadio = +process_design.empty_approve

                            if(this.noApproverRadio==2){
                                this.finalAdmin = this.finalAdmin = + process_design.approver;
                            }

                        }

                        // 抄送人信息重置
                        this.finalCopyMember = newVal.copier.map(item=>item);
                        this.finalIfMax10 = this.ifMax10 = newVal.copier_status == 1? true : false;
                    }
                },
                immediate:true
            }
        },
        created(){
            this.getRoleList();   // 获取角色列表
            this.getUserList();   // 获取管理员用户列表
            this.getUserList(0);    // 获取所有用户列表
        },
        computed:{
            chooseApprove(){
                if(this.finalInitiatorRadio==1){
                    name = '发起人自选';
                }else if(this.finalInitiatorRadio==2){
                    name = '指定成员';
                }else if(this.finalInitiatorRadio==3){
                    name = '发起人自己';
                }else if(this.finalInitiatorRadio==4){
                    name = '班主任';
                }
                return name
            }
        },  
        methods:{  
            // 检测本页是否有修改过信息
            checkStatus(){
                if(this.finalWhom != 1 ||
                    this.finalChoicePeople.length != 0 ||
                    this.finalAdmin != '' ||
                    this.finalInitiatorRadio != 1 ||
                    this.finalWhom2 != 1 ||
                    this.finalApproveWap != 1 ||
                    this.finalNoApproverRadio != 1 ||
                    this.finalZhidingMember.length != 0 ||
                    this.finalCopyMember.length != 0 ||
                    this.finalIfMax10 != false){
                    return false
                }else{
                    return true
                }
            },   
            // ---------------------------------------------step1的方法---------------------------------------------
                // 全选
                checkAllRange(val) {
                    if(typeof val == 'number'){
                        this.preChoicePeople = this.choicePeople = this.people;
                        this.rangeCheckAll = true;
                        this.isIndeterminate = false;
                        return 
                    }

                    this.preChoicePeople = val ? this.people : [];
                    this.isIndeterminate = false;
                },
                // 选择单独一个
                handleChoicePeopleChange(value) {
                    let choiceCount = value.length;
                    this.rangeCheckAll = choiceCount === this.people.length;
                    this.isIndeterminate = choiceCount > 0 && choiceCount < this.people.length;
                },
                // 取消本次选择的可发起审批的人
                cancelChoosePeople(){
                    this.preChoicePeople = this.choicePeople.map(item=>item);
                    this.rangeCheckAll = this.choicePeople.length === this.people.length;
                    this.isIndeterminate = this.choicePeople.length > 0 && this.choicePeople.length < this.people.length;
                    this.visualRangeView = false;
                },
                // 确认本次选择的可发起审批的人
                affirmChoicePeople(){
                    this.choicePeople = this.preChoicePeople.map(item=>item);
                    this.rangeCheckAll = this.choicePeople.length === this.people.length;
                    this.isIndeterminate = this.choicePeople.length > 0 && this.choicePeople.length < this.people.length;
                    this.visualRangeView = false;
                    
                },
                // 获取角色列表
                getRoleList(){
                    let listParam = {
                        status:1,   // 状态（1：正常；0：已删除）
                    }

                    let success = (res=>{
                        let data = res.data;
                        this.people = data;

                        if(this.examineModel){
                            let roleArr = this.examineModel.role;
                            this.finalChoicePeople = [];
                            this.choicePeople = [];
                            this.preChoicePeople = [];

                            this.people.forEach(item=>{
                                roleArr.forEach(item2=>{
                                    if(item.id == item2.id){
                                        this.finalChoicePeople.push(item);
                                        this.choicePeople.push(item);
                                        this.preChoicePeople.push(item);
                                    }
                                });
                            });

                            this.whom = this.finalWhom = 2;
                            this.rangeCheckAll = false;
                            this.isIndeterminate = true;


                            if(finalChoicePeople.length == this.people.length){
                                this.whom = this.finalWhom = 1;
                                this.rangeCheckAll = true;
                                this.isIndeterminate = false;
                            }

                        }else{
                            this.choicePeople = data.map(item=>item);
                            this.preChoicePeople = data.map(item=>item);
                            this.finalChoicePeople = data.map(item=>item);
                            this.rangeCheckAll = true;
                        }
                        data.forEach(item=>{
                            this.roleList.push(item);
                        })
                    })

                    let fail = ( data => {})
                    this.$ajax.get('/api/role/examineRoleGet',{params: listParam,func:{success:success,fail:fail}})
                },
                // 取消第一个侧边栏填写数据
                cancelFirst(){
                    this.whom = this.finalWhom;
                    this.choicePeople = this.finalChoicePeople.map(item=>item);
                    this.preChoicePeople = this.finalChoicePeople.map(item=>item);
                    this.active = null;
                },
                // 确认第一个侧边栏填写数据
                sureFirst(){
                    if(this.choicePeople.length==0){
                        this.$message.error('发起人不能为空')
                        return 
                    }

                    this.finalWhom = this.whom;
                    this.finalChoicePeople = this.choicePeople.map(item=>item);
                },
                turnStep1(){
                    if(this.whom == 2 && this.finalChoicePeople.length  == this.people.length){
                        this.finalWhom = 1;
                    }

                    this.whom = this.finalWhom;

                    this.choicePeople = this.finalChoicePeople.map(item=>item);

                    this.preChoicePeople = this.finalChoicePeople.map(item=>item);

                    this.active = 'first'
                },

            // ---------------------------------------------step1的方法---------------------------------------------


            // ---------------------------------------------step2的方法---------------------------------------------
                // 获取指定角色的成员列表
                getUserList(roleID,keyword){

                    // 初始化请求参数
                    let listParam = {
                        no_find_class:'1',   // 固定传 1 （不查询班级，选择性用，因为查询班级时数据量过大是会出现超时）
                        data_type:0,   // 数据类型（0：无分页，2：有分页）
                    }
                    
                    // 根据形参去添加请求参数
                    if(roleID===undefined && keyword===undefined){
                        listParam.role_id = '2,3';   // 2为超级管理员id，3为管理员角色id
                    }else{
                        listParam.n_n_e = this.keyword;   // 搜索关键字
                        listParam.role_id = this.roleType;   // 角色id（不传或传0可获取全部用户）
                    }

                    let arr = [];
                    // 如果存在已选的账号则排除已选的账号id
                    if(arr.length){
                        listParam.not_in_id = arr.map(item=>itent.id);   // 需要排除的用户（用户id 可int，可array）
                    }

                    let success = (res=>{
                        let data = res.data;
                        if(roleID===undefined && keyword===undefined){
                            this.dministrator = data; 
                        }else{
                            this.userList = data;
                            if(this.examineModel){
                                let approver = this.examineModel.approver;
                                data.forEach(item=>{
                                    approver.forEach(item2=>{
                                        if(item.id == item2.id){
                                            this.finalZhidingMember.push(item);
                                            this.zhidingMember.push(item);
                                            this.preZhidingMember.push(item);
                                        }
                                    })
                                });
                            }
                        }
                    })

                    let fail = ( data => {})

                    this.$ajax.get('/api/user/user',{params: listParam,func:{success:success,fail:fail}})
                },
                // 根据获取到的角色id更新用户列表
                updateUserList(val){
                    this.roleType = val;
                    this.getUserList(val);
                },
                // 确认已选好的指点人员
                affirmFinalZhidingMember(){
                    this.showAddMember=false
                    this.zhidingMember = this.preZhidingMember.map(item=>item)
                },
                // 取消已选好的指点人员
                cancelFinalZhidingMember(){
                    this.showAddMember=false
                    this.preZhidingMember = this.zhidingMember.map(item=>item)
                },
                // 编辑审批人
                approverEdit(){
                    this.showChangeName = !this.showChangeName;
                    this.$nextTick(()=>{
                        this.$refs.changeName.focus();
                    })
                },
                // 修改审批人
                setApprove(e){
                    e.target.blur();

                    var newName = this.finalSecondName;

                    if(!newName){
                        this.$message({
                            showClose: true,
                            message: '新名字不能为空',
                            type: 'error'
                        });

                        this.finalSecondName = this.initSecondName

                        this.showChangeName = false;

                        return
                    }else if(newName==this.initSecondName){
                        this.showChangeName = false;
                    }else{
                        // 当名字有修改且不为空的时候发送修改名字请求，请求成功后隐藏输入框
                        this.initSecondName = this.finalSecondName
                        this.showChangeName = false;
                    }
                },
                // 添加成员
                addMember(key){
                    if(this.preZhidingMember.length>=this.max5){
                        this.$message.error('最多只能选择' + this.max5 + '个人')
                        return
                    }

                    let arr = this.preZhidingMember;
                    let val = this.userList[key];

                    for(let i=0;i<arr.length;i++){
                        if(arr[i].id==val.id){
                            this.$message({
                                message: '该用户已选',
                                type: 'warning'
                            });
                            return
                        }
                    }

                    this.preZhidingMember.push(this.userList[key]);
                },
                // 取消已选择的成员
                cancelCheck(idx,finalIdx){
                    if(idx===undefined && typeof finalIdx=='number'){
                        this.preZhidingMember.splice(finalIdx,1);
                        this.zhidingMember.splice(finalIdx,1);
                    }

                    if(typeof idx=='number' && finalIdx===undefined){
                        this.preZhidingMember.splice(idx,1);
                    }
                },
                // 清空已选择的成员
                clearCheck(){
                    this.preZhidingMember = [];
                    this.zhidingMember = [];
                },
                // 取消第二个侧边栏填写数据
                cancelSecond(){
                    
                    this.zhidingMember = this.finalZhidingMember.map(item=>item);   // 审批人类型

                    this.whom2 = this.finalWhom2;   // 当initiatorRadio==1 or 4，为发起人自选时，自选一人还是多人的值

                    this.admin = this.finalAdmin;   // 当initiatorRadio==1 or 4，审批人不为空时且不自动通过时选择的管理员id 
                    
                    this.approveWap = this.finalApproveWap;   // 当initiatorRadio==1 or 2，为一次审批、会签、或签的值
                    
                    this.noApproverRadio = this.finalNoApproverRadio;

                    this.active = null;
                },
                // 确认第二个侧边栏填写数据
                sureSecond(){
                    if(this.initiatorRadio==1 || this.initiatorRadio==4){
                        if(this.noApproverRadio==2 && this.admin==''){
                            this.$message.error('审批人为空且不为自动通过时请选择管理员')
                            return
                        }

                    }else if(this.initiatorRadio==2){
                        if(this.zhidingMember.length<=0){
                            this.$message.error('指定成员不能为空')
                            return
                        }
                    }

                    this.finalWhom2 = this.whom2;   // 当initiatorRadio==1 or 4，为发起人自选时，自选一人还是多人的值

                    this.finalAdmin = this.admin;   // 当initiatorRadio==1 or 4，审批人不为空时且不自动通过时选择的管理员id 
                    
                    this.finalApproveWap = this.approveWap;   // 当initiatorRadio==1 or 2，为一次审批、会签、或签的值
                    
                    this.finalNoApproverRadio = this.noApproverRadio;

                    this.finalZhidingMember = this.zhidingMember.map(item=>item);

                    this.finalInitiatorRadio = this.initiatorRadio;

                },
                // 跳转到第二步审批人
                turnStep2(){

                    this.initiatorRadio = this.finalInitiatorRadio;

                    this.whom2 = this.finalWhom2;   // 当initiatorRadio==1 or 4，为发起人自选时，自选一人还是多人的值

                    this.admin = this.finalAdmin;   // 当initiatorRadio==1 or 4，审批人不为空时且不自动通过时选择的管理员id 
                    
                    this.approveWap = this.finalApproveWap;   // 当initiatorRadio==1 or 2，为一次审批、会签、或签的值
                    
                    this.noApproverRadio = this.finalNoApproverRadio;

                    this.zhidingMember = this.finalZhidingMember.map(item=>item);

                    this.active = 'second';
                },

            // ---------------------------------------------step2的方法---------------------------------------------
            

            // ---------------------------------------------step3的方法---------------------------------------------
                // 取消已选择的成员
                cancelCopyMember(idx,finalIdx){
                    if(idx===undefined && typeof finalIdx=='number'){
                        this.preCopyMember.splice(finalIdx,1);
                        this.copyMember.splice(finalIdx,1);
                    }

                    if(typeof idx=='number' && finalIdx===undefined){
                        this.preCopyMember.splice(idx,1);
                    }
                },
                // 清空已选择的成员
                clearCopyMember(){
                    this.preCopyMember = [];
                    this.copyMember = [];
                },
                // 确认已选好的指点人员
                affirmFinalCopyMember(){
                    this.showAddCopyMember=false;
                    this.copyMember = this.preCopyMember.map(item=>item);
                },
                // 取消已选好的指点人员
                cancelFinalCopyMember(){
                    this.showAddCopyMember=false;
                    this.preCopyMember = this.copyMember.map(item=>item);
                },
                // 添加成员
                addCopyMember(key){
                    if(this.preCopyMember.length>=this.max10){
                        this.$message.error('最多只能选择' + this.max10 + '个人');
                        return
                    }

                    let arr = this.preCopyMember;
                    let val = this.userList[key];

                    for(let i=0;i<arr.length;i++){
                        if(arr[i].id==val.id){
                            this.$message({
                                message: '该用户已选',
                                type: 'warning'
                            });
                            return
                        }
                    }

                    this.preCopyMember.push(this.userList[key]);
                },
                // 取消第二个侧边栏填写数据
                cancelThird(){
                    this.copyMember = this.finalCopyMember.map(item=>item);
                    
                    this.ifMax10 = this.finalIfMax10;
                    
                    this.active = null;

                },
                // 确认第二个侧边栏填写数据
                sureThird(){
                    this.finalCopyMember = this.copyMember.map(item=>item);
                    
                    this.finalIfMax10 = this.ifMax10;

                },
            // ---------------------------------------------step3的方法---------------------------------------------

            
            // 触发搜索逻辑
            searchUser(keyword,event){
                event.target.blur()
                this.keyword = keyword.trim()
                this.getUserList(undefined,this.keyword)
            },
            submit(){
                // 声明一个对象用于存放已经选择好的参数
                let obj = {
                    role_id: this.finalChoicePeople.map(item=>item.id),   // 角色id(一维数组，谁可以用这些审批模板)
                    type: this.finalInitiatorRadio,   // 审批人类型（1：发起人自选；2：指定成员；3：发起人自己；4：班主任；）
                    copier: this.finalCopyMember.map(item=>item.id),   // 抄送人id(一维数组)
                    copier_status: this.finalIfMax10? 1 : 0,   //允许发起人自选抄送人（0：否;1:是）
                    approver: []   // 审批人id(一维数组)
                };

                if(this.finalInitiatorRadio==1){   // 最终确定时发起人类型为发起人自选
                    let select_type = this.finalWhom2,   // 字段：int）select_type : 1：自选一个人 ； 2：自选多个人
                        empty_approve = this.noApproverRadio,   // 1、自动通过 ； 2：自动转交管理员
                        approver = [],   // （字段：审批人,一维数组）
                        approval_model = 1;   // 1、依次审批 ； 2：会签（须所有审批人同意）;3:或签（一名审批人同意或拒绝即可）

                    if(select_type==2){
                        approval_model = this.finalApproveWap
                    }

                    if(empty_approve==2){
                        approver = [this.finalAdmin];
                    }

                    obj.approver = approver;
                    obj.process_design = {select_type, empty_approve, approver, approval_model, approve_type: 1, approver_name: this.finalSecondName}

                }else if(this.finalInitiatorRadio==2){   // 最终确定时发起人类型为指定成员
                    
                    obj.process_design = {
                        approver: this.finalZhidingMember.map(item=>{item.id,item.number, item.name, item.role_name, item.icon_path}),   // （字段：审批人,一维数组(id,账号，用户名，角色名，头像)）
                        approve_type: 2,
                        approver_name: this.finalSecondName,   // 审批人自定义名字
                        approval_model: this.finalApproveWap   // 1、依次审批 ； 2：会签（须所有审批人同意）;3:或签（一名审批人同意或拒绝即可）
                    }
                    obj.approver = this.finalZhidingMember.map(item=>item.id);             

                }else if(this.finalInitiatorRadio==3){   // 最终确定时发起人类型为发起人自己
                    obj.process_design = {approve_type: 3, approver_name: this.finalSecondName};
                }else if(this.finalInitiatorRadio==4){   // 最终确定时发起人类型为班主任
                    let empty_approve = this.noApproverRadio, approver = [];

                    if(empty_approve==2){
                        approver = [this.finalAdmin];
                    }

                    obj.approver = approver;
                    obj.process_design = {empty_approve, approver, approve_type: 4, approver_name: this.finalSecondName};

                }

                return obj
            },
            turnStep3(){
                this.copyMember = this.finalCopyMember.map(item=>item);

                this.preCopyMember = this.finalCopyMember.map(item=>item);

                this.ifMax10 = this.finalIfMax10;

                this.active = 'third'; 
            }

        }
    }
</script>

<style lang="scss">
    .form-design-third{
        // min-width:1720px;
        // max-width:2000px;
        height: 100%;
        min-height: 800px;
        overflow: hidden;
        aside{
            padding:22px 30px;
            width:280px;
            height:100%;
            &.el-aside-left{

            }
            &.el-aside-right{
                position:relative;
                background: #fff;
                .el-aside-right-first{
                    >p{
                        height:20px;
                        line-height:20px;
                        font-size: 14px;
                        color: #666666;
                        letter-spacing: 0;
                        &:nth-child(2){
                            margin-top:38px;
                        }
                    }
                    .el-select{
                        margin-top:10px;
                    } 
                    > .range{
                        position:relative;
                        box-sizing:border-box;
                        margin-top:20px;
                        width:280px;
                        line-height:20px;
                        font-size: 14px;
                        letter-spacing: 0.13px;
                        >p{
                            padding:9px 10px;
                            min-height:100px;
                            max-height:200px;
                            color: #999999;
                            overflow-x: hidden;
                            background: #F9F9F9;
                            border: 1px solid #DDDDDD;
                        }
                        .choose{
                            position:absolute;
                            bottom:-40px;
                            right:0px;
                            font-size: 13px;
                            color: #348EFC;
                            letter-spacing: 0.12px;
                            cursor:pointer;
                        }
                        .error{
                            position:absolute;
                            bottom:-23px;
                            left:0px;
                            color:red;
                        }
                    }        
                }
                .el-aside-right-second{
                    >p{
                        // height:20px;
                        line-height:20px;
                        font-size: 14px;
                        color: #666666;
                        letter-spacing: 0;
                    }
                    >div{
                        >p{
                            // height:20px;
                            line-height:20px;
                            font-size: 14px;
                            color: #666666;
                            letter-spacing: 0;
                            &.myself,&.applyRange{
                                margin-top:30px;
                                font-size: 12px;
                                letter-spacing: 0.11px;
                            }
                            &.applyRange{
                                margin-top:10px;

                            }
                            &.noApprover{
                                margin-top:30px;
                                color: #000;
                                letter-spacing: 0.13px;
                            }
                        }

                    }
                    .appointed{
                        margin-top:10px;
                        >span{
                            margin-left:10px;
                            vertical-align:bottom;
                            font-size: 12px;
                            color: #666666;
                            letter-spacing: 0.11px;
                        }
                        .chosen{
                            position:relative;
                            box-sizing:border-box;
                            margin-top:30px;
                            height:148px;
                            border-bottom: 1px solid #DDDDDD;
                            >span{
                                position:relative;
                                margin-bottom:10px;
                                padding:0 25px 0 15px;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                width:70px;
                                height:30px;
                                line-height:30px;
                                text-align:center;
                                font-size: 12px;
                                color: #333333;
                                letter-spacing: 0.11px;
                                background: #EFEFEF;
                                border-radius: 18px;
                                >i{
                                    position:absolute;
                                    top:50%;
                                    right:15px;
                                    transform:translateY(-50%);
                                    width:10px;
                                    height:10px;
                                    color:#999;
                                }
                                &:nth-child(even){
                                    margin-left:18px;
                                }
                            }
                            >button{
                                position:absolute;
                                bottom:10px;
                                right:0;
                                padding:0;
                                font-size: 12px;
                                line-height: 12px;
                                color: #D04040;
                                letter-spacing: 0.11px;
                                color:#D04040;
                                background:#fff;
                                border: 0 none;
                            }
                        }
                    }
                    .el-radio-group{
                        margin-top:38px;
                        >.el-radio{
                            margin:0;
                            margin-bottom:16px;
                            width:50%;
                            overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;
                            font-size: 14px;
                            color: #000;
                            .el-radio__label > span{
                                margin-left:6px;
                                font-size: 12px;
                                color: #999999;
                                letter-spacing: 0.11px;
                            }
                        }

                        &:not(.first-radio){
                            // background:pink;
                            position:relative;
                            margin-top:10px;
                            >.el-radio{
                                margin:0;
                                margin-bottom:10px;
                                width:9100%;
                                overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;
                                font-size: 14px;
                                color: #000;
                            }    
                            .el-select{
                                position:absolute;
                                bottom:4px;
                                right:-78px;
                                width:73%;
                                input{
                                    padding-left:8px;
                                    &::-webkit-input-placeholder{
                                        font-size: 12px;
                                        color: #999999;
                                        letter-spacing: 0.11px;
                                    }
                                }
                            }
                        }
                    }
                }
                .el-aside-right-third{
                    >p{
                        height:20px;
                        line-height:20px;
                        font-size: 14px;
                        color: #666666;
                        letter-spacing: 0;
                    }
                    >.el-button{
                        margin-top:40px;
                    }
                    .chosen{
                        position:relative;
                        box-sizing:border-box;
                        margin-top:30px;
                        min-height:148px;
                        border-bottom: 1px solid #DDDDDD;
                        >span{
                            position:relative;
                            margin-bottom:10px;
                            padding:0 25px 0 15px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            width:70px;
                            height:30px;
                            line-height:30px;
                            text-align:center;
                            font-size: 12px;
                            color: #333333;
                            letter-spacing: 0.11px;
                            background: #EFEFEF;
                            border-radius: 18px;
                            >i{
                                position:absolute;
                                top:50%;
                                right:15px;
                                transform:translateY(-50%);
                                width:10px;
                                height:10px;
                                color:#999;
                            }
                            &:nth-child(even){
                                margin-left:18px;
                            }
                        }
                        >button{
                            position:absolute;
                            bottom:10px;
                            right:0;
                            padding:0;
                            font-size: 12px;
                            line-height: 12px;
                            color: #D04040;
                            letter-spacing: 0.11px;
                            color:#D04040;
                            background:#fff;
                            border: 0 none;
                        }
                    }
                    .el-checkbox{
                        margin-top:20px;
                        height:20px;
                        line-height:20px;
                        font-size: 12px;
                        color: #666666;
                        letter-spacing: 0.11px;
                        >span{
                            vertical-align:middle;
                            font-size: 12px;
                            color: #666666;
                            letter-spacing: 0.11px;
                        }
                    }
                }
                .btn-group{
                    position:absolute;
                    bottom:80px;
                    left:50%;
                    transform:translate(-50%);
                }
            }
        }


        .form-design-third-main{
            // overflow:hidden;
            margin:50px auto 0;
            width:1000/1920*100%;
            height:90%;
            background: #fff;
            ul{
                padding-top:30px;
                li{
                    margin:0 auto;
                    &:nth-child(odd){
                        box-sizing:border-box;
                        width:500px;
                        height:166px;
                        overflow:hidden;
                        border: 1px solid #DDDDDD;
                        >p{
                            padding-left:14px;
                            height:36px;
                            line-height:36px;
                            >input{
                                background: #fff;
                                border:0 none;
                            }
                        }
                        >div{
                            padding:50px 42px;
                            >span{
                                float:left;
                                height:20px;
                                line-height:20px;
                                font-size: 14px;
                                color: #000;
                                letter-spacing: 0.13px;
                            }
                            >i{
                                float:right;
                                margin-right:42px;
                                height:20px;
                            }
                        }
                    }
                    &:nth-child(even){
                        margin:0 auto;
                        padding:13px 0;
                        width:30px;
                        height:34px;
                        background: url('../../../../static/image/examine/arrow.png') center center no-repeat;
                        background-size:contain;
                        background-origin:content-box;
                    }
                    &:nth-child(3){
                        p > span:hover{
                            cursor:text;
                        }
                    }
                    &.active{
                        border: 2px solid #348EFC;
                    }
                }
            }
        }
       
        .el-dialog__wrapper{
            .el-dialog{
               
                // 选择范围
                .checkRange{
                    margin-bottom:20px;
                    .el-checkbox{
                        margin-left:5px;
                    }
                    .el-checkbox-group{
                        padding-left: 30px;
                        overflow:hidden;
                        .el-checkbox{
                            margin-bottom:8px;
                            width:98px;
                            overflow:hidden;
                            .el-checkbox__input{
                                float:left;
                                margin-top:3px;
                                width:14px;
                            }
                            .el-checkbox__label{
                                overflow:hidden;
                                padding-left:5px;
                                width:75px;
                                height:20px;
                                white-space:nowrap;
                                text-overflow:ellipsis;
                            }
                        }
                    }
                }

                // 添加成员弹窗
                .addMember{
                    margin:0 10px;
                    margin-bottom:20px;
                    font-size:16px;
                    >div{
                        &:first-child{
                            width:260px;
                            .el-input{
                                input{
                                    font-size:14px;
                                }
                                input::-webkit-input-placeholder{
                                    font-size:14px;
                                }
                            }
                        }
                        &:nth-child(2){
                            margin-left:20px;
                            width:400px;
                            .el-input__icon.el-icon-search{
                                font-size:18px;
                                cursor:pointer;
                            }
                            .el-input{
                                width: 240px;
                                input{
                                    font-size:14px;
                                }
                                input::-webkit-input-placeholder{
                                    font-size:14px;
                                }
                            }
                            .el-button{
                                margin-left: 11px;
                                width: 82px;
                            }
                        }
                        &:nth-child(3){
                            margin-top:20px;
                            padding:4px;
                            box-sizing:border-box;
                            width:260px;
                            height:288px;
                            border:1px solid #DDDDDD;
                            >ul{
                                height:100%;
                                overflow-X:hidden;
                                li{
                                    height:36px;
                                    span{
                                        box-sizing:border-box;
                                        margin:8px 0;
                                        padding-left:8px;
                                        width:40%;
                                        height:20px;
                                        font-size: 14px;
                                        line-height:20px;
                                        color: #000000;
                                        letter-spacing: 0.11px;
                                        overflow:hidden;
                                        text-overflow:ellipsis;
                                        white-space:nowrap;
                                        &:last-child{
                                            width:17%;
                                            color: #348EFC;
                                        }
                                    }
                                }
                            }
                        }
                        &:nth-child(4){
                            position:relative;
                            margin-top:20px;
                            margin-left:20px;
                            padding-top:36px;
                            box-sizing:border-box;
                            width:440px;
                            height:288px;
                            border:1px solid #DDDDDD;
                            overflow:hidden;
                            >ul{
                                overflow-X:hidden;
                                height:100%;
                                li{
                                    &:first-child{
                                        position:absolute;
                                        top:0;
                                        left:0;
                                        right:0;
                                        padding-right:15px;
                                        background: #EFEFEF;
                                        span:first-child{
                                            box-sizing:border-box;
                                            padding-left:27px;
                                        }
                                    }
                                    width:425px;
                                    height:36px;
                                    font-size: 14px;
                                    color: #000000;
                                    letter-spacing: 0.11px;
                                    span{
                                        box-sizing:border-box;
                                        margin:8px 0;
                                        padding-left:8px;
                                        width:38%;
                                        height:20px;
                                        font-size: 14px;
                                        line-height:20px;
                                        color: #000000;
                                        letter-spacing: 0.11px;
                                        overflow:hidden;
                                        text-overflow:ellipsis;
                                        white-space:nowrap;
                                        &:first-child{
                                            vertical-align:middle;
                                            .el-icon-close.pointer{
                                                vertical-align:middle;
                                                font-size:20px;
                                                color: #999999;
                                                &:hover{
                                                    color:#5cb6ff;
                                                }
                                            }

                                        }
                                        &:nth-child(2){

                                        }
                                        &:last-child{
                                            width:23%;
                                            padding-left:14px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

</style>